<template>
	<view class="category‌page">
		<view class="searchline">
			<view class="searchleft">
				<view class="iconfont icon-sousuo"></view>
				<input type="text" v-model="searchvalue" placeholder="请输入名称" />
			</view>
			<view class="title" @click="searchshow=true">
				筛选
			</view>
		</view>
		
		<view class="listbox">
			<view class="itemlist" v-for="item in list " :key="item.id">
				<view class="left">
					<image src="https://changban.dianjingkeji.net/img/fd456a1456416.jpg" mode=""></image>
				</view>
				<view class="right">
					<view class="name">
						{{item.name}}
					</view>
					<view class="gongxiaoline">
						<view class="itemgongxiao" v-for="label in item.gongxiao" :key="label.id">
							{{label.label}}
						</view>
						
					</view>
					<view class="btnline">
						<view class="numberbox">
							<view class="label">
								膳食评分：
							</view>
							<view class="number">
								{{item.pingfen}}
							</view>
						</view>
						<view class="itembtn">
							采购添加
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		<view class="win" v-if="searchshow">
			<view class="searchwin">
				<view class="iconfont icon-guanbi" @click="searchshow=false"></view>
				<view class="itemsearch">
					<view class="searchtitle">
						名称
					</view>
					<input class="inputname" type="text" placeholder="请输入名称" />
				</view>
				<view class="itemsearch">
					<view class="searchtitle">
						功能
					</view>
					<view class="box">
						<view class="gongnenglist">
							<checkbox-group class="gongnenglist">
							  <label v-for="item in gongxiaolist" :key="item.id">
									<view class="itemgongneng">
										<checkbox value="cb" style="transform:scale(0.8)" :checked="true" />
								     <image src="/static/image/蔬菜.png" mode=""></image>
								        {{item.label}}
							        </view>
							  </label>
							</checkbox-group>
						</view>
					</view>
		
				
				</view>
				<view class="itemsearch">
					<view class="searchtitle">
						评分
					</view>
					<view class="numberline">
						<input type="number" placeholder="请输入" />
						至
						<input type="numer" placeholder="请输入" />
					</view>
				</view>
				
				
				<view class="btnline">
					<view class="btn1">
						重置
					</view>
					<view class="btn2">
						完成
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="win" v-if="addwinshow">
			<view class="addwin">
				<view class="iconfont icon-guanbi" ></view>
				<view class="goodbox">
					<view class="imgbox">
						<image src="https://changban.dianjingkeji.net/img/fd456a1456416.jpg" mode=""></image>
					</view>
					<view class="goodright">
						<view class="goodinfo">
							<view class="goodname">
								土豆
							</view>
							<view class="type">
								推荐
							</view>
							<view class="pingfen">
								膳食评分：<span>92</span>
							</view>
						</view>
						<view class="gooddata">
							<view class="number">
								1个
							</view>
							<view class="label">
								约
							</view>
							<view class="num">
								100
							</view>
							<view class="danwei">
								g(2两)
							</view>
						</view>
					</view>
				</view>
				<view class="addbox">
					<view class="searchtitle">
						功能
					</view>
					<view class="gongnenglist">
						<view class="itemgongneng">
							抗炎食物
						</view>
						<view class="xianzhi">
							--
						</view>
					</view>
				</view>
				
				<view class="addbox">
					<view class="searchtitle">
						提示
					</view>
					<view class="gongnenglist">
						<view class="itemtishi">
							GI生糖指数27
						</view>
					</view>
				</view>
				
				<view class="addbox">
					<view class="searchtitle">
						选择重量
					</view>
					<view class="zhongliangbox">
						
						<swiper class="swiper"  display-multiple-items='5'   >
										<swiper-item v-for="item in weghtlist" :key="item.id" @click="selcetweight(item.id)">
											<view  class="currentbox">
												<view v-show="currentid==item.id" class="iconfont icon-xiangxia1"></view>
												<view class="itemweight">
													<view >
														{{item.num}}g
													</view>
													<view >
														{{item.label}}
													</view>
												</view>
												<view v-show="currentid==item.id" class="iconfont icon-xiangshang1"></view>
											</view>
										</swiper-item>
									
									</swiper>
						
					</view>
				</view>
				<view class="addbox">
					<view class="searchtitle">
						采购日期
					</view>
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
											<view class="uni-input">{{date}}</view>
										</picker>
				</view>
				<view class="btnline">
					<view class="btn1">
						重置
					</view>
					<view class="btn2">
						完成
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchvalue:'',
				searchshow:false,
				addwinshow:true,
				currentid:0,
				list:[
					{
						name:'土豆',
						id:10068,
						pingfen:92,
						gongxiao:[
							{
								label:'抗炎食物',
								id:956
							},
							{
								label:'抗癌食物',
								id:958
							}
						]
					},
					{
						name:'洋葱',
						id:10066,
						pingfen:92,
						gongxiao:[
							{
								label:'抗炎食物',
								id:956
							},
							{
								label:'抗癌食物',
								id:958
							}
						]
					}
				],
				gongxiaolist:[
					{
						label:'抗炎食物',
						id:956
					},
					{
						label:'抗癌食物',
						id:958
					},
					{
						label:'抗菌食物',
						id:951
					},
					{
						label:'刺激血管',
						id:952
					},
					
					{
						label:'降血糖',
						id:935
					},
					
					{
						label:'降血糖',
						id:936
					}
				],
				weghtlist:[
					{
						id:1,
						num:80,
						label:'A'
					},
					{
						id:2,
						num:80,
						label:'B'
					},
					{
						id:3,
						num:80,
						label:'C'
					},
					
					{
						id:4,
						num:80,
						label:'D'
					},
					{
						id:5,
						num:80,
						label:'E'
					},
					{
						id:6,
						num:80,
						label:'F'
					},
					
					{
						id:7,
						num:80,
						label:'G'
					},
					{
						id:8,
						num:80,
						label:'H'
					},
					{
						id:9,
						num:80,
						label:'I'
					}
				]
				
			}
		},
		methods: {
			selcetweight(e){
				console.log(e)
				this.currentid=e
			},
		}
	}
</script>

<style lang="less" scoped>
.category{
	width: 750rpx;
	box-sizing: border-box;
	background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
	.searchline{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 40rpx;
		font-size: 30rpx;
		.searchleft{
			width: 85%;
			display: flex;
			align-items: center;
			background-color: white;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 25rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			input{
				
				width: 90%;
				height: 100%;
				box-sizing: border-box;
				padding-left: 20rpx;
			}
		}
	}
	.listbox{
		width: 100%;
		box-sizing: border-box;
		margin-top: 20rpx;
		padding: 20rpx;
		.itemlist{
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.left{
				width: 280rpx;
				height: 180rpx;
				border-radius: 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 30rpx;
				}
			}
			.right{
				width: 420rpx;
				box-sizing: border-box;
				padding-left: 20rpx;
				.name{
					font-weight: bold;
				}
				.gongxiaoline{
					display: flex;
					align-items: center;
					font-size: 22rpx;
					color: #9A9A9A;
					margin: 18rpx 0;
					.itemgongxiao{
						padding: 4rpx 14rpx;
						border-radius: 6rpx;
						background-color:#F1F1F1;
						margin-right: 8rpx;
					}
				}
				.btnline{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					.numberbox{
						display: flex;
						align-items: center;
						
						
						.label{
							color: #9A9A9A ;
							font-size: 30rpx;
						}
						.number{
							font-size: 34rpx;
							font-weight: bold;
							color: #FF8A00;
						}
					}
					.itembtn{
						color: white;
						font-size: 26rpx;
						background-color: #9746FE ;
						padding: 10rpx 18rpx;
					    border-radius: 24rpx;
					}
				}
				
				
			}
		}
	}
	
	
	.win{
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 9999;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		 top: calc(var(--window-top) + 0px);
		background-color: rgba(0, 0, 0, 0.5);
		.searchwin{
			width: 100%;
			height: 70%;
			position: absolute;
			left: 0;
			bottom: 0;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			background-color: white;
			.iconfont{
				position: absolute;
				right: 20rpx;
				top: 30rpx;
				
			}
			.itemsearch{
				width: 100%;
				margin-top: 40rpx;
				.searchtitle{
					height: 28rpx;
					border-left: 6rpx solid #8000FF;
					padding-left: 30rpx;
					font-weight: bold;
                    font-size: 28rpx;
					line-height: 28rpx;
					margin-bottom: 40rpx;
					
				}
				.inputname{
					width: 96%;
					margin: auto;
					box-sizing: border-box;
					padding: 4rpx 30rpx;
					height: 60rpx;
					line-height: 60rpx;
					background-color: #F4F4F4;
					border-radius: 25rpx;
				}
			
				.box{
					overflow-y: auto;
					padding-bottom: 30rpx;
					
					
				}
				.gongnenglist{
					width: 1100rpx;
					height: 100%;
					display: flex;
				   flex-wrap: wrap;
				 
					
					.itemgongneng{
						flex: 1 1 auto; /* 允许子项增长和收缩 */
						  flex-shrink: 0;
						 width: fit-content;
						display: flex;
						align-items: center;
						background-color: rgba(244,244,244,1);
						border-radius: 20rpx;
						padding: 4rpx 30rpx 4rpx 6rpx;
						font-weight: 800;
						color: #585858 ;
						margin-right:30rpx ;
						margin-bottom: 20rpx;
						
						image{
							width: 30rpx;
							height: 30rpx;
							margin: 0 10rpx;
						}
					}
				}
				.numberline{
					display: flex;
					align-items: center;
					justify-content: center;
					input{
						border: 1rpx solid #9A9A9A;
						width: 120rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 30rpx;
						margin: 0 30rpx;
					}
				}
				
			}
			.btnline{
				width: 70%;
				margin: 50rpx auto;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				.btn1{
					width: 200rpx;
					height: 80rpx;
					border-radius: 20rpx;
					border: 1rpx solid #9A9A9A;
					text-align: center;
					line-height: 80rpx;
					font-size: 30rpx;
					color: #9A9A9A;
				}
				.btn2{
					width: 200rpx;
					height: 80rpx;
					border-radius: 20rpx;
					background-color: #9746FE;
					text-align: center;
					line-height: 80rpx;
					font-size: 30rpx;
					color: white;
				}
			}
		}
		
		
		.addwin{
			width: 100%;
			height: 95%;
			position: absolute;
			left: 0;
			bottom: 0;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			background-color: white;
			.iconfont{
				position: absolute;
				right: 20rpx;
				top: 30rpx;
			}
			.goodbox{
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;
				.imgbox{
					width: 230rpx;
					height: 150rpx;
					border-radius: 20rpx;
				 box-shadow: 5rpx 5rpx 5rpx #00000014,
				              5rpx -5rpx 5rpx #00000014,
				              -5rpx 5rpx 5rpx #00000014,
				              -5rpx -5rpx 5rpx #00000014;
					image{
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
				.goodright{
					width: 450rpx;
					line-height: 2.7;
					.goodinfo{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.goodname{
							font-weight: bold;
						}
						.type{
							width: 100rpx;
							height: 40rpx;
							box-sizing: border-box;
							border-radius: 10rpx;
							color: #52A000;
							background-color: #EDFFDA;
							font-size: 26rpx;
							text-align: center;
							line-height: 40rpx;
						}
						.pingfen{
							font-size: 30rpx;
							font-weight: bold;
							color: #ACACAC;
							span{
								font-weight: bold;
								font-size: 36rpx;
								color: #FF8A00 ;
							}
							
						}
					}
					.gooddata{
						display: flex;
						align-items: center;
						.label{
							font-size: 30rpx;
							color: #9A9A9A;
							margin-left: 10rpx;
						}
						.num{
							font-size: 34rpx;
							font-weight: bold;
						}
						.danwei{
							font-size: 28rpx;
						}
					}
					
				}
			}
			.addbox{
				width: 100%;
				margin-top: 40rpx;
				.searchtitle{
					height: 28rpx;
					border-left: 6rpx solid #8000FF;
					padding-left: 30rpx;
					font-weight: bold;
				    font-size: 28rpx;
					line-height: 28rpx;
					margin-bottom: 40rpx;
					
				}
				.gongnenglist{
					width: 100%;
					display: flex;
					align-items: center;
					.itemgongneng{
						font-size: 30rpx;
						font-weight: bold;
						color:#52A000;
						border-radius: 20rpx;
						text-align: center;
						padding: 8rpx 50rpx;
						background-color: #F2F2F2;
						margin-right: 20rpx;
					}
					.xianzhi{
						width: 150rpx;
						font-size: 30rpx;
						font-weight: bold;
						color:black;
						border-radius: 20rpx;
						text-align: center;
						height: 40rpx;
						padding: 8rpx 50rpx;
						background-color: #F2F2F2;
					}
					.itemtishi{
						font-size: 30rpx;
						font-weight: bold;
						color:#FF8A00 ;
						border-radius: 20rpx;
						text-align: center;
						padding: 8rpx 50rpx;
						background-color: #F2F2F2;
						margin-right: 20rpx;
					}
				}
				.zhongliangbox{
					width: 100%;
					padding-bottom: 20rpx;
				   
				
					.swiper{
						width: 100%;
						height: 200rpx;
						display: flex;
						align-items: center;
						
						.currentbox{
							height: 200rpx;
							flex-direction: column;
							display: flex;
							align-items: center;
							justify-content: center;
							
						}
						.iconfont{
							position: static;
							text-align: center;
							font-size: 50rpx;
							color: pink;
						}
						.itemweight{
							background:#F4F4F4;
							box-sizing: border-box;
							padding-top: 20rpx;
							color: #949494 ;
							height: 100rpx;
							width: 90%;
							font-size: 22rpx;
							border-radius: 30rpx;
							text-align: center;
						
						}
						.act{
							color: white;
							background-color: #9746FE;
						}
					}
				}
			}
			.btnline{
				width: 70%;
				margin: 50rpx auto;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				.btn1{
					width: 200rpx;
					height: 80rpx;
					border-radius: 20rpx;
					border: 1rpx solid #9A9A9A;
					text-align: center;
					line-height: 80rpx;
					font-size: 30rpx;
					color: #9A9A9A;
				}
				.btn2{
					width: 200rpx;
					height: 80rpx;
					border-radius: 20rpx;
					background-color: #9746FE;
					text-align: center;
					line-height: 80rpx;
					font-size: 30rpx;
					color: white;
				}
			}
			
		}
	}
	
}
</style>
